<template>
  <!--搜索框-->
  <div class="search">
    <el-input
        v-model="keyWord"
        placeholder="请输入关键字"
        class="input-with-select"
    >
      <template #append>
        <el-button @click="searchArticle" class="searchBtn">Search</el-button>
      </template>
    </el-input>
  </div>
  <!--搜索结果-->
  <div class="resultBox">
    <el-empty description="空空如也" v-show="articleList.length === 0"/>
    <div v-show="articleList.length > 0" class="resultContent">
      <router-link
          v-for="item in articleList"
          :key="item.bid"
          :to="{
                name: 'Article',
                query: {
                  id: item.bid,
                  category: item.category
                }
              }"
          class="resultItem"
      >
        <div class="title">
          {{item.name}}
        </div>
        <div class="category">
          所属：{{item.category}}
        </div>
      </router-link>
    </div>
  </div>
</template>

<script setup>
  import {ref,reactive} from "vue"
  import {ElMessage} from "element-plus";

  import {http} from "../config/axios/index.js"

  //搜索关键字
  let keyWord = ref("")

  //搜索结果
  const articleList = reactive([])

  //搜索
  async function searchArticle(){
    articleList.splice(0,articleList.length)
    const res = await http({
      method: "GET",
      url: "article/search_article",
      params: {
        keyWord: keyWord.value
      }
    })
    let msg = "搜索失败"
    if(res.data.code === 0){
      articleList.push(...res.data.data.articleList)
      if(articleList.length > 0){
        msg = "搜索成功"
      }else{
        msg = "搜索不到结果"
      }
    }
    ElMessage({
      showClose: true,
      message: msg,
      center: true,
    })
  }
</script>

<style scoped>
  .search{
    padding: 20px 15%;
    background-color: var(--el-bg-color);
  }
  .search .searchBtn{
    background: #F3904F;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #3B4371, #F3904F);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #3B4371, #F3904F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #ffffff;
    border: none;
    border-radius: 0 5px 5px 0;
  }
  .resultBox{
    padding: 20px;
    height: calc(100vh - 59px - 72px);
    overflow: auto;
    background-color: var(--el-bg-color);
  }
  .resultContent{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 10px;
  }
  .resultItem{
    text-decoration: none;
    color: var(--el-text-color-primary);
    padding: 20px;
    display: block;
    border: 2px solid var(--el-color-primary);
  }
  .resultItem:hover{
    color: var(--el-color-primary);
    border-color: var(--el-text-color-primary);
    box-shadow: 0 0 10px 0 var(--el-text-color-primary),inset 0 0 10px 0 var(--el-text-color-primary);
  }
  .resultItem .title{
    font-weight: bold;
  }
  @media (max-width: 800px){
    .resultContent{
      grid-template-columns: 1fr;
    }
  }
</style>